<template>
  <fullscreen ref="fullscreen">
    <el-container>
      <el-aside :width="asideWith">
        <!-- 左侧导航栏 -->
        <h3 class="title-text">小U商城后台</h3>
        <!-- 添加router后, 可直接跳转到对应页面; 菜单的index属性必须和路由规则中的path属性 -->
        <el-menu
          router
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#262A32"
          text-color="#fff"
          active-text-color="#ffd04b"
          :collapse="collapse"
          unique-opened
        >
          <el-menu-item index="/">
            <i class="el-icon-house"></i>
            <span>首页</span>
          </el-menu-item>

          <!-- <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>系统设置</span>
            </template>
            <el-menu-item index="/menu">菜单管理</el-menu-item>
            <el-menu-item index="/role">角色管理</el-menu-item>
            <el-menu-item index="/admin">管理员管理</el-menu-item>
          </el-submenu>

          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-shopping-bag-2"></i>
              <span>商城管理</span>
            </template>
            <el-menu-item index="/category">分类管理</el-menu-item>
            <el-menu-item index="/specs">规格管理</el-menu-item>
            <el-menu-item index="/goods">商品管理</el-menu-item>
          </el-submenu> -->

          <el-submenu v-for="item in menus" :index="'top-'+item.id" :key="item.id">
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{item.title}}</span>
            </template>
            <el-menu-item v-for="val in item.children" :key="val.id" :index="val.url">{{val.title}}</el-menu-item>
          </el-submenu>


        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <el-row>
            <el-col :span="2">
              <el-button
                @click="collapse=!collapse"
                type="primary"
                size="mini"
                icon="el-icon-s-fold"
              ></el-button>
            </el-col>
            <el-col :span="3">
              <!-- 面包屑导航 -->
              <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">管理中心</el-breadcrumb-item>
                <el-breadcrumb-item>
                  <a href="/">首页</a>
                </el-breadcrumb-item>
              </el-breadcrumb>
            </el-col>
            <el-col :span="1">
              <el-button @click="$router.go(-1)" icon="el-icon-back" size="mini" plain circle></el-button>
            </el-col>
            <el-col :offset="15" :span="3">
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                  admin
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="fullscreen">全屏操作</el-dropdown-item>
                  <el-dropdown-item>个人信息</el-dropdown-item>
                  <el-dropdown-item command="logout">安全退出</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </el-header>
        <el-main>
          <!-- 二级路由出口: 二级路由匹配到的组件的渲染位置 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </fullscreen>
</template>

<script>
export default {
  data() {
    return {
      collapse: false,
      menus:[]
    };
  },
  created(){
    let userinfo=sessionStorage.getItem('userinfo');
    if(userinfo){
      this.menus=JSON.parse(userinfo).menus;
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleCommand(command) {
      this[command]();
    },
    fullscreen() {
      // 触发自定义事件fullscreentoggle
      // this.$root.$emit('fullscreentoggle');
      this.$refs["fullscreen"].toggle();
    },
    logout() {
      // 删除登录信息
      sessionStorage.removeItem("userinfo");
      // 重定向到登录页面
      console.log("logout");
      this.$router.push("/login");
    }
  },
  computed: {
    asideWith() {
      return this.collapse ? "64px" : "226px";
    }
  }
};
</script>

<style>
.el-container {
  height: 100vh;
  min-width: 970px;
}
.el-menu-vertical-demo {
  height: calc(100vh - 60px);
  border: 0;
}
.el-menu-vertical-demo li {
  text-align: left;
}
/* 设置导航高亮样式 */
.el-menu-item.is-active {
  background: #409eff !important;
  color: #fff !important;
}

.el-header {
  background-color: #fff;
  color: #333;
  /* text-align: center; */
  display: flex;
  align-items: center;
}
.el-header .el-row {
  width: 100%;
}
.el-header .el-breadcrumb {
  line-height: 28px;
}
.el-aside {
  background-color: #d3dce6;
  color: #333;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

/* 侧边栏 */
.title-text {
  height: 60px;
  line-height: 60px;
  text-align: center;
  letter-spacing: 4px;
  font-weight: normal;
  background: #444;
  color: #fff;
}
</style>